<template>
  <el-container>
    <el-aside width="380px" class="slider ml-16">
<!--      <h1>当前宽度：{{screenWidth}}</h1>-->
      <div class="modules">
        <div v-for="(item,index) in moduleList" :key="index">
          <h4>{{item.group}}</h4>
          <div class="module-box">
            <module-entry class="module" v-for="module in item.modules" :key="module.name" :module="module"></module-entry>
          </div>
        </div>
      </div>
      <user-info class="mt-16"></user-info>
    </el-aside>
    <el-main class="modules-main">
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import ModuleEntry from '@/components/ModuleEntry';
import UserInfo from '@/components/UserInfo';
export default {
  name: 'User',
  components: { UserInfo, ModuleEntry },
  data () {
    return {
      moduleList: [], // 模块
      screenWidth: document.body.clientWidth
    }
  },
  methods: {

  },
  watch: {
    // 监听浏览器窗口宽度变化
    screenWidth (newVal) {
      this.screenWidth = newVal
      // this.screenWidth > 1200 ? this.showSidebar = true : this.showSidebar = false
    }
  },
  created () {

  },
  mounted () {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth
      })()
    };
    this.getModules()
  }
}
</script>

<style scoped lang="scss">
  .modules {
    width: 340px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 20px;
    padding-bottom: 0;

    .module-box {
      padding: 0 12px 0 12px;

      .module {
        margin: 16px 32px 16px 0;
      }

      .module:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  .modules-main {
    border-radius: 10px;
    background-color: #fff;
    margin: 0 16px;
    min-width: 940px;
  }
</style>
